<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <title>菜谱首页</title>
    <style>
        .button {
            display: inline-block;
            border: 1px solid gray;
            padding: 5px;
        }
    </style>
</head>

<body>
<div id="app" class="react-container"></div>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-core/5.8.35/browser.js"></script>
<script type="text/babel">
    const AddColorForm = ({onNewColor = f => f}) => {
        let _title, _color;
        const submit = e => {
            e.preventDefault();
            onNewColor(_title.value, _color.value);
            _title.value = '';
            _color.value = '#000000';
            _title.focus();
        }

        return (
            <form onSubmit={submit}>
                <input ref={input => _title = input} type="text" placeholder="color title..." required/>
                <input ref={input => _color = input} type="color" required/>
                <input type="submit" className="button" value="增加"></input>
            </form>
        );
    };

    ReactDOM.render(<AddColorForm onNewColor={(title, color) => {
        console.log(`TODO : Add new ${title} and ${color} to the list`);
        console.log(`TODO : render UI with new Color`);
    }}/>, document.getElementById('app'));
</script>
</body>

</html>
